<template>
  <section v-loading="loading">
    <el-row class="toolbar">
      <el-col :span="16">
        <!-- 目录 -->
        <div class="icon-bar">
          <svg-icon class="icon" icon="home" v-on:click.native.prevent="goRootEvt" title="主页"></svg-icon>
          <svg-icon v-if="currDir.id" class="icon" icon="arrow-up" v-on:click.native.prevent="goPrevEvt" title="上个目录"></svg-icon>
          <svg-icon class="icon" icon="new-folder" v-on:click.native.prevent="newFolderEvt" title=""></svg-icon>
          <svg-icon class="icon" icon="preview" v-on:click.native.prevent="previewEvt"></svg-icon>
          <file-path :paths="paths" @goFolder="goFolderEvt"></file-path>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 搜索 -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <!-- 由这层来控制 列表显示样式 -->
        <div class="folder m-preview">
          <!-- 目录清单 -->
          <div v-if="currDir.childrens" @click="goFolderEvt(child)" class="file" v-for="(child,index) in currDir.childrens" :key="index">
            <svg-icon icon="folder" width="100%" height="100%">{{child.name}}</svg-icon>
          </div>
          <!-- 文件清单 -->
          <div v-if="currDir.files" class="file" v-for="(child,index) in currDir.files" :key="'file-'+index">
            <div v-if="imgPreview && (child.suffix=='png' || child.suffix=='jpg' || child.suffix=='gif')">
              <img :src="child.uri" style="width:100%;height:100%" @click="openFileEvt(child.id)"/>{{child.title}}
            </div>
            <svg-icon v-else :icon="'file-type-'+child.suffix" width="100%" height="100%" @click.native.prevent="openFileEvt(child.id)">{{child.title}}</svg-icon>
            <div class="menu-bar">
              <svg-icon width="18px" height="18px" icon="btn-delete" @click.native.prevent="btnDeleteEvt(child)"></svg-icon>
            </div>
          </div>
          <div v-if="currDir.id" class="file">
            <el-upload
              action="#"
              :show-file-list="false"
              :before-upload="beforeUpload">
              <svg-icon icon="new-file" width="100%" height="100%">上传</svg-icon>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <el-dialog :visible.sync="showNewFolder" title="添加目录">
      <new-folder v-on:success="newFolderSuccess" :parent="currDir" v-on:cancel="showNewFolder=false"></new-folder>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import Vue from 'vue'
  import svgIcon from '@/common/svgIcon'
  import filePath from './subs/filePath'
  import newFolder from './subs/newFolder'

  export default {
    components: { svgIcon,filePath,newFolder },
    name: 'file-manager-index',
    data() {
      return {
        paths:[{name:''}],
        currDir:{},
        showNewFolder:false,
        loading:false,
        imgPreview:false,

      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    mounted(){
      // console.log('department',this.department)
      this.loadRoot()
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      loadRoot(){
        this.loading=true
        this.fetch({
          name:"getRootByCompany",
          data:{companyId:this.department.companyId}
        }).then(res=>{
          if(this.paths.length>0) {
            this.paths.splice(0, this.paths.length)
            this.paths.push({name:''})
          }
          Vue.set(this.currDir,'childrens',res)
          this.loading=false
        }).catch(err=>{
          console.log(err)
          this.loading=false
        })
      },
      goRootEvt(e){
        this.currDir = {}// 置空
        this.loadRoot()
      },
      goPrevEvt(e){
        this.loading=true
        // 还是需要上一级目录数据的
        let prevDirId = this.currDir.parentId
        // 删除 最后一个目录
        this.paths.splice(this.paths.length-1,1)
        if(prevDirId){
          this.fetch({
            name:"getDirById",
            data:{id:prevDirId}
          }).then(res=>{
            this.currDir = res
            this.loading=false
            // 加载子目录
            this.goFolderEvt(res)
          }).catch(err=>{
            console.log(err)
            this.loading=false
          })
        }else { // 没有上一级目录了
          this.loading=false
          this.goRootEvt(null)
        }
      },
      goFolderEvt(folder){
        // 看看是否根目录
        if(!folder.id){
          this.goRootEvt(null)
          return
        }
        this.loading= true
        // 设置当前目录
        this.currDir = folder
        // 添加目录路径
        // 看下存在不，存在需要另外操作
        let fIndex = this.paths.findIndex(p=>p.id === folder.id)
        if(fIndex>0){
          this.paths.splice(fIndex)
        }
        this.paths.push(folder)
        console.log('当前目录:',folder)
        // 获取子目录
        this.fetch({name:"getDirChildren",data:{id:folder.id}})
          .then(res=>{
            Vue.set(this.currDir,'childrens',res)
            this.loading=false
          }).catch(err=>{
          console.log(err)
          this.loading=false
          })
        // 获取文件
        this.fetch({name:"getFileByDir",data:{dirId:folder.id}})
          .then(res=>{
            Vue.set(this.currDir,'files',res)
            this.loading=false
          }).catch(err=>{
            console.log(err)
          this.loading=false
          })
      },
      btnDeleteEvt(file){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading=true
          this.fetch({name:'deleteFile',data:{id:file.id}})
            .then(res=>{
              let idx = this.currDir.files.findIndex(f=>f.id === file.id)
              if(idx>=0)
                this.currDir.files.splice(idx,1)
              this.loading=false
            }).catch(err=>{
            console.log(err)
            this.loading=false
          }).catch(err=>{
            console.log(err)
          })
        })
      },
      openFileEvt(e){
        this.$message.info('还没有实现诶！咋整？')
      },
      newFolderEvt(e){
        this.showNewFolder = true
      },
      previewEvt(e){
        this.imgPreview = !this.imgPreview
      },
      newFolderSuccess(e){
        //新建目录不要刷新了
        if(!this.currDir.childrens)
          Vue.set(this.currDir,'childrens',[])
        this.currDir.childrens.push(e)
        this.showNewFolder = false
      },
      beforeUpload(file){
        console.log('看一眼file----------',file)
        this.loading= true
        // file.name = encodeURIComponent(file.name)
        this.fetch({
          name:'simpleUploadByClent',
          data:{file,dirId:this.currDir.id},
          method:'upload'
        }).then(res=>{
          console.log(res)
          // 加入组合
          if(this.currDir.files)
            this.currDir.files.push(res)
          else
            Vue.set(this.currDir,'files',res)
          this.loading=false
        }).catch(err=>{
          console.log(err)
          this.loading=false
        })
        return false
      }
    }
  }
</script>

<style lang="scss">
  .toolbar{
    border-bottom:1px solid #ccc;
  }
  .icon-bar{
    display: flex;
    flex-direction: row;
    padding: 8px 0;
  }
  .icon{
    margin:4px 8px;
    cursor:pointer;
  }
  .folder{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .folder .file{
    position: relative;
  }
  .folder .file .menu-bar{
    position: absolute;
    height:18px;
    width:18px;
    top:8px;
    right:8px;
    display: none;
  }
  .folder .file:hover .menu-bar{
    display: inline;
  }

  .m-preview .file{
    width:68px;
    height:68px;
    padding:18px;
    margin:4px;
    /*border:1px solid #349234;*/
    cursor:pointer;
  }
</style>
